import React from 'react';
import { InputItem,List,Button,WingBlank,WhiteSpace } from 'antd-mobile';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom'
import { login } from '../../redux/user.redux';
import Logo from '../../component/logo/logo'

@connect(
state => state.user,
{login}
)
class Login extends React.Component{
	constructor(props) {
	    super(props)
		this.state = {
			user:"",
			pwd:""
		}
	}
	
	handleChange(key,value){
		this.setState({
			[key]:value
		});
	}
	handleLogin(){
		this.props.login(this.state);
	}
	toRegister(){
		this.props.history.push('/register');
	}
	render(){
		return (
			<div>
				{(this.props.redirectTo && this.props.redirectTo !== this.props.location.pathname) ? <Redirect to={this.props.redirectTo}></Redirect> : null}
				<Logo></Logo>
				<WingBlank>
					{this.props.msg ? <p>{this.props.msg}</p> : null}
					<List>
						<InputItem onChange={v => this.handleChange('user',v)}>用户</InputItem>
						<InputItem onChange={v => this.handleChange('pwd',v)}>密码</InputItem>
					</List>
					<WhiteSpace />
					<Button type="primary" onClick={this.handleLogin.bind(this)}>登录</Button>
					<WhiteSpace />
					<Button type="primary" onClick={this.toRegister.bind(this)}>注册</Button>
				</WingBlank>
			</div>
		)
	}
}
export default Login;